<template>
  <div class="playerBottom">
    <div class="player-progress">
      <span ref="eleCurrentTime">00:00</span>
      <div class="progress-bar" @click="progressClick" ref="progressBar">
        <div class="progress-line" ref="progressLine">
          <div class="progress-dot"></div>
        </div>
      </div>
      <span ref="eleTotalTime">00:00</span>
    </div>
    <div class="player-control">
      <div class="mode loop" ref="mode" @click="mode"></div>
      <div class="prev" @click="prev"></div>
      <div class="play" @click="play" ref="play"></div>
      <div class="next" @click="next"></div>
      <div class="favorite" @click="favorite" ref="favorite" :class="{'active' : isFavorite(currentSong)}"></div>
    </div>
  </div>
</template>

<script>
import {mapActions, mapGetters} from 'vuex'
import modeType from "../../store/modeType";
import {formatTime} from '../../tools/tools'

export default {
  props: {
    totalTime: Number,
    currentTime: Number
  },
  name: "PlayerBottom",
  methods: {
    ...mapActions([
      'setIsPlaying',
      "setModeType",
      'setCurrentIndex',
      'setCurrentTime',
      'setFavoriteSong'
    ]),
    play() {
      this.setIsPlaying(!this.isPlaying)
    },
    mode() {
      if (this.modeType === modeType.loop) {
        this.setModeType(modeType.one)
      } else if (this.modeType === modeType.one) {
        this.setModeType(modeType.random)
      } else if (this.modeType === modeType.random) {
        this.setModeType(modeType.loop)
      }
    },
    prev() {
      this.setCurrentIndex(this.currentIndex - 1)
      // console.log(this.currentIndex);
    },
    next() {
      this.setCurrentIndex(this.currentIndex + 1)
      // console.log(this.currentIndex);
    },
    favorite() {
      this.setFavoriteSong(this.currentSong)
    },
    isFavorite(song) {
      let result = this.favoriteList.find(function (currentValue) {
        return currentValue.id === song.id
      })
      return result !== undefined
    },

    progressClick(e) {
      //1. 计算进度条的位置
      // let normalLeft = e.target.offsetLeft
      let normalLeft = this.$refs.progressBar.offsetLeft
      let eventLeft = e.pageX
      let clickLeft = eventLeft - normalLeft
      // let progressWidth = e.target.offsetWidth
      let progressWidth = this.$refs.progressBar.offsetWidth
      let value = clickLeft / progressWidth
      this.$refs.progressLine.style.width = value * 100 + "%"
      //2. 计算当前应该从什么地方开始播放
      let currentTime = this.totalTime * value
      this.setCurrentTime(currentTime)
    }
  },
  computed: {
    ...mapGetters([
      'isPlaying',
      'modeType',
      'currentIndex',
      'currentSong',
      'favoriteList'
    ])
  },
  watch: {
    isPlaying(newValue, oldValue) {
      if (newValue) {
        this.$refs.play.classList.add('active')
      } else {
        this.$refs.play.classList.remove('active')
      }
    },
    modeType(newValue, oldValue) {
      if (newValue === modeType.loop) {
        this.$refs.mode.classList.remove('random');
        this.$refs.mode.classList.add('loop');
      } else if (newValue === modeType.one) {
        this.$refs.mode.classList.remove('loop');
        this.$refs.mode.classList.add('one');
      } else if (newValue === modeType.random) {
        this.$refs.mode.classList.remove('one');
        this.$refs.mode.classList.add('random');
      }
    },
    totalTime(newValue, oldValue) {
      if (newValue) {
        let time = formatTime(newValue);
        this.$refs.eleTotalTime.innerHTML = time.minute + ":" + time.second;
      }
    },
    currentTime(newValue, oldValue) {
      if (newValue) {
        //1. 格式化当前播放时间
        let time = formatTime(newValue);
        this.$refs.eleCurrentTime.innerHTML = time.minute + ":" + time.second;
        //2. 根据当前播放的时间计算比例 (*100 是计算百分比)
        let value = newValue / this.totalTime * 100
        this.$refs.progressLine.style.width = value + "%"
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../assets/css/mixin";
@import "../../assets/css/variable";

.playerBottom {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;

  .player-progress {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
      @include font_size($font_medium_s);
      //@include font_color();
      color: #fff;
    }

    .progress-bar {
      width: 100%;
      height: 5px;
      background: #fff;
      margin: 0 10px;
      border-radius: 10px;

      .progress-line {
        width: 0%;
        height: 100%;
        background: #ccc;
        position: relative;
        @include bullet_active_color();


        .progress-dot {
          width: 25px;
          height: 25px;
          background: #fff;
          border-radius: 50%;
          position: absolute;
          top: 50%;
          left: 100%;
          transform: translateY(-50%);
          border: 1px solid #ccc;
        }
      }
    }
  }

  .player-control {
    width: 80%;
    margin: 0 auto;
    padding: 50px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    div {
      width: 84px;
      height: 84px;
    }

    .mode {
      &.loop {
        @include bg_img("../../assets/images/loop");
      }

      &.one {
        @include bg_img("../../assets/images/one");
      }

      &.random {
        @include bg_img("../../assets/images/shuffle");
      }
    }

    .prev {
      @include bg_img("../../assets/images/prev")
    }

    .play {
      @include bg_img("../../assets/images/play");

      &.active {
        @include bg_img("../../assets/images/pause")
      }
    }

    .next {
      @include bg_img("../../assets/images/next")
    }

    .favorite {
      @include bg_img("../../assets/images/un_favorite");

      &.active {
        @include bg_img("../../assets/images/favorite");
      }
    }
  }
}
</style>
